<template>
	<scroll-view scroll-y style="height:100vh" @scrolltolower="lower" enable-back-to-top>
		<!-- 图标导航 -->
		<view :class="'cu-list grid col-'+gridCol+' no-border'">
			<view class="cu-item" v-for="(item, index) in iconList" :key="index" @tap="list(item)" :data-idx="item.id"
				:data-name="item.category">
				<!-- 动态背景色 -->
				<view :class="'bg-' + item.color" style="width:90rpx;height:90rpx;line-height: 90rpx;margin:0 auto;border-radius:50%">
					<!-- 动态图标类 -->
					<view :class="'fa fa-'+item.icon + ' text-white' "></view>
				</view>
				<text>{{item.category}}</text>
			</view>
		</view>

		<!-- 商家动态 -->
		<view class="flex bg-white solid p-xs margin-bottom-xs mb-sm margin-top-xs shadow" style="height:100rpx">
			<view class="flex-sub text-red padding-sm margin-xs">商家动态</view>
			<view class="flex-treble gundongBox padding-sm margin-xs text-cut">
				<view class="gundongList">
					<template v-for="(item, index) in joins">
						<image :src="item.customerHead"></image>
						<text class="gun-text">恭喜{{item.entityName}}入驻{{item.typeName}}</text>
					</template>
				</view>
			</view>
			<view class="flex-sub bg-red text-sm padding-sm margin-xs radius text-center radius" @tap="enterFun">
				立即入驻
			</view>
		</view>

		<!-- 顶部导航 -->
		<view class="flex bg-white shadow">
			<view class="flex flex-treble nav text-center">
				<view class="cu-item flex-sub" :class="{ 'text-blue cur': index === current }"
					v-for="(item, index) in tabList" :key="index" @tap="tabSelect(index)" :data-id="index">
					{{item}}
				</view>
			</view>
			<view class="flex-sub text-center text-blue" style="line-height:90rpx">
				<picker :range="provinceList" range-key="name" @change="bindPickerChange">
					<view class="picker">
						{{attenCity}} <text class="fa fa-angle-down"></text>
					</view>
				</picker>
			</view>
		</view>

		<!-- 列表内容 -->
		<view class="bg-white margin-sm shadow radius" v-for="(item, index) in list" :key="index" @tap="detail(item)">
			<view class="cu-item shadow">
				<view class="content flex">
					<view class="flex-sub padding-sm">
						<image class="radius bg-gray" :src="item.homePicPath" mode="aspectFill"
							style="height:22vw;width:22vw"></image>
					</view>

					<view class="flex-treble padding-left">
						<view class="text-content padding-top-sm">
							<view style="width:60vw" class="text-bold text-black text-cut text-lg padding-top-xs">
								{{item.businessName}}
							</view>
							<view style="width:60vw" class="text-cut padding-top-xs">
								<text class="fa fa-map-marker"></text> {{item.businessAddress}}
							</view>
						</view>
						<view class="flex">
							<view class="flex-sub text-grey text-sm">人气 : {{item.businessHits}}</view>
							<view class="flex-sub text-grey text-sm">
								距离 : {{item.distance ? item.distance : '--'}} km
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.bussAd" style="width:100%" class="noticebar">
					{{item.bussAd}}
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	// import {location} from '../../utils/util.js'
	import {iconList,
		enter,provinceList
	} from '../../utils/util.js';
	export default {
		data() {
			return {
				queryData: {
					currPage: 1,
					orderType: 1 //0智能排序，1距离排序
				}, // companyAreaCode
				tabList: ['推荐', '最新', '附近'],
				current: 2,
				list: [],
				pullStatus: 'loading',
				attenCity: '省份',
				showEnter: false,
				iconList:iconList,
				gridCol: 5,
				skin: false,
				joins: [],
				img: 'https://images.51zubus.com/index/f9d1548945bd39a3dab373ad03333b8.jpg',
				inviterId: '',
				provinceList:  provinceList
			}
		},
		onLoad(options) {
			//this.getJoin();
			this.getList();
		},
		onShow() {
			
		},
		methods: {
			  // 获取轮播动态
			  getJoin() {
			    let _this = this;
			    this.baseRequest('api/customerJoinHistory/page', 'GET', {}, function (res) {
			      _this.joins=res.rows;
			    });
			  },
			  bindPickerChange(e){
			    let item = this.data.provinceList[parseInt(e.detail.value)]
			    let queryData = this.data.queryData;
			    queryData.provinceCode = item.code;
			    queryData.currPage = 1;
			    this.setData({
			      attenCity: item.name,
			      queryData,
			      pullStatus: 'loading',
			      list: [],
			      cityopen: false
			    }, () => {
			      this.getList(); // 查询列表
			    })
			  },
		 
			  // 获取商铺列表
			  getList(type) {
			    let _this = this;
			    this.baseRequest('api/business/page', 'GET', this.queryData, function (res) {
			      let list = [];
			      if (res && typeof (res) != 'string') {
			        list = res;
			        _this.pullStatus='loaded'
			      } else {
			        _this.pullStatus= 'nomore'
			      }
			      uni.hideLoading();
			      // 判断是否为上拉加载
			      if (type == 'pull') {
			        list = _this.list.concat(list);
			      }
			      _this.list=list
			    });
			  },
			    // 详情
			    detail(e) {
			      let item = e.currentTarget.dataset.item;
			      uni.navigateTo({
			        url: '/pages/cars/detail/detail?businessID=' + item.businessID + '&distance=' + item.distance
			      })
			    },
			   enterFun() {
			      enter();
			    },
			    // 导航选择
			    tabSelect(e) {
					// this.TabCur = e.currentTarget.dataset.id;
					// console.log(e)
			       let current = e;
			  //     if (current == this.current) {
			  //       return;
			  //     }
			      let queryData = this.queryData;
			      queryData.currPage = 1;
			      queryData.orderType = 0;
			      if (current == 2) {
			        queryData.orderType = 1; // 距离最近
			      }else if (current == 1) {
			        queryData.orderType = 2; // 最新
			      }
				  
				  
				  this.queryData=queryData;
				  this.current=current;
				  this.pullStatus='loading'
				  this.list=[]
				  this.getList();
			      /*this.setData({
			        queryData,
			        current,
			        pullStatus: 'loading',
			        list: []
			      }, () => {
			        this.getList();
			      })*/
				  
			    }
		}
	}
</script>